<template>
  <div class="pagination_wrap" :style="[style]">
    <el-pagination background :page-size="pageSize" :page-sizes="pageSizes" :current-page.sync="pages" :total="total" :layout="integrated ? layout : 'prev, pager, next'" @size-change="handleSizeChange" @current-change="change" />
  </div>
</template>

<script>
import store from '@/store'
export default {
  props: {
    integrated: {
      type: Boolean,
      default: true
    },
    pageSize: {
      type: Number,
      default: 10
    },
    layout: {
      type: String,
      default: () => 'total, sizes, prev, pager, next, jumper'
    },
    pageSizes: {
      type: Array,
      default: () => [10, 20, 30, 40]
    },
    page: {
      type: Number,
      default: 1
    },
    total: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      modalDialog: store.getters.dialog,
      pages: 1,
      style: {
        justifyContent: this.integrated ? 'flex-end' : 'center'
      }
    }
  },
  watch: {
    page (newVal) {
      console.log('Page changed:', newVal);
      this.pages = newVal;
    }
  },
  created () {
    console.log("Created hook - page000000000000:", this.pages);
    // this.pages = this.page
  },
  updated () {
    console.log("Updated hook - page:", this.pages);
  },
  methods: {

    change (e) {
      this.$emit('current-change', e)
    },
    handleSizeChange (val) {
      this.$emit('SizeChange', val)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.pagination_wrap {
  display: flex;
  // justify-content: flex-end;
  align-items: center;
  padding: 20px;
  .el-pagination {
    height: 36px;
    display: flex;
    ::v-deep span {
      height: 36px !important;
      line-height: 36px !important;
    }
    ::v-deep button {
      height: 36px !important;
      line-height: 36px !important;
      min-width: 36px;
    }
    ::v-deep li {
      height: 36px !important;
      line-height: 36px !important;
      min-width: 36px;
    }
    ::v-deep .el-pagination__editor {
      height: 36px !important;
      line-height: 36px !important;
      margin: 0 5px;
    }
    ::v-deep .el-input__inner {
      height: 36px !important;
      line-height: 36px !important;
      padding: 0;
    }
    ::v-deep el-pagination__total {
      height: 36px !important;
      line-height: 36px !important;
    }
  }
  .el-pagination__total {
    height: 36px !important;
    line-height: 36px !important;
  }
}
.el-select .el-input__inner {
  &:focus {
    border-color: $primaryColor !important;
  }
}
// .el-pagination span:not([class*=suffix]){
//   line-height: 36px;
// }
</style>
